'use client';

import { useState, useEffect } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';

interface SyncProgress {
  tableName: string;
  lastSyncDate: string;
  currentPage: number;
  totalProcessed: number;
  status: 'running' | 'completed' | 'error' | 'skipped';
  lastError?: string;
  syncType: 'full' | 'delta' | 'rebuild';
  startTime: number;
  endTime?: number;
  recordsSkipped?: number;
}

interface SyncConfig {
  pageSize: number;
  batchSize: number;
  maxWorkers: number;
  deltaSyncEnabled: boolean;
  cronSchedule: string;
  autoRefreshInterval: number;
  environment: string;
}

export default function NONSAPSyncPage() {
  const [syncProgress, setSyncProgress] = useState<SyncProgress[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [lastUpdated, setLastUpdated] = useState<string>('');
  const [syncConfig, setSyncConfig] = useState<SyncConfig | null>(null);

  // 설정 정보 조회
  const fetchSyncConfig = async () => {
    try {
      const response = await fetch('/api/nonsap-sync/config');
      const result = await response.json();
      
      if (result.success) {
        setSyncConfig(result.data);
      } else {
        console.error('Failed to fetch sync config:', result.error);
      }
    } catch (error) {
      console.error('Error fetching sync config:', error);
    }
  };

  // 동기화 상태 조회
  const fetchSyncStatus = async () => {
    try {
      const response = await fetch('/api/nonsap-sync/status');
      const result = await response.json();
      
      if (result.success) {
        setSyncProgress(result.data);
        setLastUpdated(result.timestamp);
      } else {
        console.error('Failed to fetch sync status:', result.error);
      }
    } catch (error) {
      console.error('Error fetching sync status:', error);
    }
  };

  // 수동 동기화 트리거
  const triggerSync = async () => {
    setIsLoading(true);
    try {
      const response = await fetch('/api/nonsap-sync/trigger', {
        method: 'POST'
      });
      const result = await response.json();
      
      if (result.success) {
        // 상태 새로고침
        setTimeout(fetchSyncStatus, 2000);
      } else {
        alert('동기화 시작에 실패했습니다: ' + result.error);
      }
    } catch (error) {
      console.error('Error triggering sync:', error);
      alert('동기화 트리거 중 오류가 발생했습니다.');
    } finally {
      setIsLoading(false);
    }
  };

  // 상태별 배지 색상
  const getStatusBadge = (status: string) => {
    switch (status) {
      case 'running':
        return <Badge variant="default" className="bg-blue-500">실행 중</Badge>;
      case 'completed':
        return <Badge variant="default" className="bg-green-500">완료</Badge>;
      case 'error':
        return <Badge variant="destructive">오류</Badge>;
      case 'skipped':
        return <Badge variant="outline" className="bg-yellow-100">완료됨</Badge>;
      default:
        return <Badge variant="secondary">알 수 없음</Badge>;
    }
  };

  // Cron 스케줄을 사용자 친화적으로 변환
  const formatCronSchedule = (cronSchedule: string) => {
    if (cronSchedule === '0 */30 * * * *') {
      return '30분마다';
    }
    if (cronSchedule === '0 0 1 * * *') {
      return '매일 새벽 1시';
    }
    return cronSchedule; // 기본값으로 원본 반환
  };



  // 동기화 타입별 배지 색상
  const getSyncTypeBadge = (syncType: string) => {
    switch (syncType) {
      case 'delta':
        return <Badge variant="default" className="bg-green-500">차분 동기화</Badge>;
      case 'full':
        return <Badge variant="default" className="bg-blue-500">전체 동기화</Badge>;
      case 'rebuild':
        return <Badge variant="default" className="bg-orange-500">삭제 후 재구성</Badge>;
      default:
        return <Badge variant="secondary">{syncType}</Badge>;
    }
  };

  // 초기 데이터 로드
  useEffect(() => {
    fetchSyncConfig();
    fetchSyncStatus();
  }, []);

  // 자동 새로고침
  useEffect(() => {
    if (!syncConfig) return;
    
    const interval = setInterval(fetchSyncStatus, syncConfig.autoRefreshInterval);
    return () => clearInterval(interval);
  }, [syncConfig]);

  return (
    <div className="container mx-auto p-6">
      <div className="flex justify-between items-center mb-6">
        <div>
          <h1 className="text-3xl font-bold">NONSAP 데이터 동기화</h1>
          <p className="text-muted-foreground">
            Oracle DB와 PostgreSQL 간의 데이터 동기화 상태를 모니터링합니다.
          </p>
        </div>
        <div className="flex gap-2">
          <Button onClick={fetchSyncStatus} variant="outline">
            새로고침
          </Button>
          <Button onClick={triggerSync} disabled={isLoading}>
            {isLoading ? '실행 중...' : '수동 동기화'}
          </Button>
        </div>
      </div>

      {lastUpdated && (
        <Card className="mb-6">
          <CardContent className="pt-6">
            <p className="text-sm text-muted-foreground">
              마지막 업데이트: {new Date(lastUpdated).toLocaleString('ko-KR')}
            </p>
          </CardContent>
        </Card>
      )}

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {syncProgress.map((progress) => (
          <Card key={progress.tableName}>
            <CardHeader>
              <div className="flex justify-between items-start">
                <CardTitle className="text-lg">{progress.tableName}</CardTitle>
                <div className="flex gap-2">
                  {getSyncTypeBadge(progress.syncType)}
                  {getStatusBadge(progress.status)}
                </div>
              </div>
              <CardDescription>
                마지막 동기화: {new Date(progress.lastSyncDate).toLocaleString('ko-KR')}
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-2">
                <div className="flex justify-between">
                  <span className="text-sm text-muted-foreground">현재 페이지:</span>
                  <span className="text-sm font-medium">{progress.currentPage}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-sm text-muted-foreground">처리된 레코드:</span>
                  <span className="text-sm font-medium">{progress.totalProcessed.toLocaleString()}</span>
                </div>
                {progress.recordsSkipped && progress.recordsSkipped > 0 && (
                  <div className="flex justify-between">
                    <span className="text-sm text-muted-foreground">스킵된 레코드:</span>
                    <span className="text-sm font-medium">{progress.recordsSkipped.toLocaleString()}</span>
                  </div>
                )}
                {progress.endTime && progress.startTime && (
                  <div className="flex justify-between">
                    <span className="text-sm text-muted-foreground">실행 시간:</span>
                    <span className="text-sm font-medium">
                      {((progress.endTime - progress.startTime) / 1000).toFixed(2)}초
                    </span>
                  </div>
                )}
                {progress.lastError && (
                  <div className="mt-2">
                    <p className="text-sm text-red-600 break-words">
                      오류: {progress.lastError}
                    </p>
                  </div>
                )}
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {syncProgress.length === 0 && (
        <Card>
          <CardContent className="pt-6">
            <p className="text-center text-muted-foreground">
              동기화 정보가 없습니다. 동기화를 실행해보세요.
            </p>
          </CardContent>
        </Card>
      )}

      {syncConfig && (
        <Card className="mt-6">
          <CardHeader>
            <CardTitle>동기화 설정</CardTitle>
            <CardDescription>
              테이블별 최적 동기화 방식을 자동 선택하여 실행됩니다. 
              멀티스레드로 병렬 처리하여 성능을 최적화합니다.
            </CardDescription>
          </CardHeader>
          <CardContent>
                          <div className="space-y-2 text-sm">
                <p><strong>실행 환경:</strong> {syncConfig.environment}</p>
                <p><strong>동기화 방식:</strong> 테이블별 자동 선택 (차분/전체/재구성)</p>
                <p><strong>차분 동기화:</strong> {syncConfig.deltaSyncEnabled ? '활성화' : '비활성화'}</p>
                <p><strong>실행 주기:</strong> {formatCronSchedule(syncConfig.cronSchedule)}</p>
              <p><strong>페이지 크기:</strong> {syncConfig.pageSize.toLocaleString()}개 레코드</p>
              <p><strong>배치 크기:</strong> {syncConfig.batchSize.toLocaleString()}개 레코드</p>
              <p><strong>워커 수:</strong> {syncConfig.maxWorkers}개 (병렬 처리)</p>
              <p><strong>자동 새로고침:</strong> {(syncConfig.autoRefreshInterval / 1000)}초마다</p>
              <p><strong>동기화 대상:</strong> {syncProgress.length}개 테이블</p>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}